<!--
* @author wn
* @date 2022/09/08 14:52:01
* @description: 订单管理-tabs组件
* 采用 render 函数 动态生成
* 1 都是订单状态  待付款 已付款 已发货 未发货  数据 页面结构相似
*   可以  动态批量生成  也可以  直接生成--xtx-tabs-panel
* 2 本组件 负责 数据  交互逻辑
*   头部 导航  由插槽 数据 动态生成
*   下方 内容 部分  就是插槽 -- 中 也只有一个 插槽
*   所以 内容 部分  就是 xtx-tabs-panel  的插槽 --item
*   结构不写 <slot/> 也可以直接通过 { slots }获取--item.children.default()
*   所以 页面整体结构 只与 xtx-tabs-panel有关
!-->
<script>
import { useVModel } from '@vueuse/core'
export default {
	name: 'XtxTabs',
	props: {
		modelValue: {
			type: [String, Number],
			default: '',
		},
	},
	setup(props, { emit, slots }) {
		// 点击切换 tabs   由 父组件  v-model 控制  name
		const activeName = useVModel(props, 'modelValue', emit)
		const click = (name, i) => {
			// v-model
			activeName.value = name
			// 自定义事件
			emit('tab-click', { name, i })
		}

		/**
		 * render 函数
		 * 1 返回 整个 tabs 大容器
		 * 2 根据 xtx-tabs-panel      创建  头部 tabs a标签
		 * 3 将  xtx-tabs-panel--插槽   作为 content 内容
		 */
		const render = () => {
			/**
			 * xtx-tabs-panel--通过 item.type.name 判断
			 * 动态批量生成 slots.default()--item.children    没有 name
			 * 直接生成    slots.default()--item
			 */
			const dynamicPanels = []
			slots.default().forEach(item => {
				if (item.type.name === 'XtxTabsPanel') {
					dynamicPanels.push(item)
				} else {
					// v-for 渲染 + 去掉 注释 当作 插槽  1 没有名字 2 不是数组
					item.children instanceof Array &&
						item.children.forEach(item => dynamicPanels.push(item))
				}
			})
			// 2 获取 默认插槽--生成 头部 tabs 标签--a
			// class={取值--{对象}}
			const as = dynamicPanels.map((item, i) => (
				<a
					href="javascript:;"
					onClick={() => click(item.props.name, i)}
					class={{ active: activeName.value === item.props.name }}>
					{item.props.label}
				</a>
			))
			const tabNav = <nav>{as}</nav>
			// 3 将  xtx-tabs-panel--插槽   作为 content 内容
			// panel中 没有结构  需要 mySlots.children.default() 获取其 插槽数据
			// panel中 有结构   可以直接使用 因为他就是一个 组件

			/* const contents = dynamicPanels.map(item => item.children.default())
			const content = contents.find(
				panel => panel.props.name === activeName.value
			) */
			const content = dynamicPanels.find(
				panel => panel.props.name === activeName.value
			)
			const contents = <div class="content">{content}</div>
			// 1 返回 整个 tabs 大容器
			return <div class="xtx-tabs">{[tabNav, contents]}</div>
		}
		return render
	},
}
</script>
<style scoped lang="less">
.xtx-tabs {
	background-color: #fff;
	> nav {
		display: flex;
		border-bottom: 1px solid #f5f5f5;
		> a {
			width: 110px;
			text-align: center;
			line-height: 60px;
			border-right: 1px solid #f5f5f5;
			font-size: 16px;
			// &:last-child {
			// 	border-right: none;
			// }
			&.active {
				border-top: 2px solid @xtxColor;
				line-height: 56px;
			}
		}
	}
}
</style>
